<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head th:include="common/header"></head>
<body>
	<div class="layui-fluid">

		<!-- 导航菜单 -->
		<div th:replace="common/system/system_fragment :: system_menu('支付宝生活号')"></div>

		<!-- 当前位置 -->
		<div th:replace="common/system/system_fragment :: system_location('支付宝生活号', '菜单管理')"></div>
		
		<div class="layui-row yy-margin-top-10">
			<div class="layui-col-md4">
				<ul class="ztree" id="tree"></ul>
			</div>
			<div class="layui-col-md8">
				
				<fieldset class="layui-elem-field">
					<legend>基本信息</legend>
					<div class="layui-field-box">
						<form class="layui-form" method="post">
							<div class="layui-colla-item">
								<div class="layui-form layui-form-pane">
									<!-- 菜单id -->
									<input type="hidden" id="id" name="id">
									
									<!-- 菜单标题 -->
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">标题</label>
										<div class="layui-input-block">
											<input type="text" name="title" autocomplete="off" class="layui-input" placeholder="标题">
										</div>
									</div>
									
									<!-- 菜单关键字 -->
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">关键字</label>
										<div class="layui-input-block">
											<input type="text" name="keycode" autocomplete="off" class="layui-input" placeholder="关键字">
										</div>
									</div>
									
									<!-- 父id -->
									<input type="hidden" id="parentid" name="parentid">
									
									<!-- 顺序 -->
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">顺序</label>
										<div class="layui-input-block">
											<input type="text" name="seq" autocomplete="off" class="layui-input" placeholder="顺序">
										</div>
									</div>
									
									<!-- 操作类型， 1.调用服务 2.跳转连接 3.发送消息 -->
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">操作类型</label>
										<div class="layui-input-block">
											<input type="text" name="operation" autocomplete="off" class="layui-input" placeholder="操作类型">
										</div>
									</div>
									
									<!-- 消息类型 消息类型 只有当字段operation为3时，此字段才有值：1.文本消息 2.单图文消息 --> 
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">消息类型</label>
										<div class="layui-input-block">
											<input type="text" name="type" autocomplete="off" class="layui-input" placeholder="消息类型">
										</div>
									</div>
									
									<!-- 调用服务的服务地址 -->
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">服务地址</label>
										<div class="layui-input-block">
											<input type="text" name="serverurl" autocomplete="off" class="layui-input" placeholder="服务地址">
										</div>
									</div>
									
									<!-- 跳转链接的，链接地址 -->
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">链接地址</label>
										<div class="layui-input-block">
											<input type="text" name="linkaddress" autocomplete="off" class="layui-input" placeholder="链接地址">
										</div>
									</div>
									
									<!-- 创建日期 --> 
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">创建日期</label>
										<div class="layui-input-block">
											<input type="text" name="createDate" autocomplete="off" class="layui-input" placeholder="创建日期">
										</div>
									</div>
									
									<!-- 修改日期 --> 
									<div class="layui-form-item">
										<label class="layui-form-label layui-bg-orange">修改日期</label>
										<div class="layui-input-block">
											<input type="text" name="updateDate" autocomplete="off" class="layui-input" placeholder="修改日期">
										</div>
									</div>
									
								</div>
							</div>
						</form>
					</div>
				</fieldset>
			
				<div class="layui-form layui-form-pane">
					
					<a class="layui-btn layui-btn-danger yy-float-right yy-margin-right-10" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'menu:delete'}" onclick="delMenu();">
						<i class="layui-icon">&#xe640;</i> 删除
					</a>
					
					<a class="layui-btn yy-float-right yy-margin-right-10" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'menu:update'}" onclick="editMenu();">
						<i class="layui-icon">&#xe642;</i> 编辑
					</a>
					
					<a class="layui-btn yy-float-right yy-margin-right-10" onclick="addMenu();" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'menu:add'}">
						<i class="layui-icon">&#xe654;</i> 添加
					</a>
					
					<a class="layui-btn yy-float-right yy-margin-right-10" onclick="showMenu();" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'menu:show'}">
						<i class="layui-icon">&#xe654;</i> 查看
					</a>
					
					<a class="layui-btn yy-float-right yy-margin-right-10" onclick="syncToWebChat();" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'menu:syncwx'}">
						<i class="layui-icon">&#xe681;</i> 同步到微信
					</a>
					
					<a class="layui-btn yy-float-right yy-margin-right-10" onclick="syncToAlipay();" th:each="str,iterStat:${USER_PERMISSION_KEY}" th:if="${str eq 'menu:syncalipay'}">
						<i class="layui-icon">&#xe681;</i> 同步到支付宝
					</a>

				</div>
			</div>
		</div>
	</div>

	<!-- 引入js -->
	<div th:replace="common/script"></div>
	
	<script th:inline="none">
	/*<![CDATA[*/
	
	//增加菜单
	var addMenu = function(){
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var nodes = treeObj.getSelectedNodes();
		var parentid;
		if(nodes.length > 0){
			parentid = nodes[0].id;
		} else {//如果什么节点都没选择，那说明增加根节点，那么parentid=-1
			parentid = "-1";
		}
		window.location.href="/menu/menuform/-1/"+parentid;
	};
	
	//编辑菜单
	var editMenu = function(){
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var nodes = treeObj.getSelectedNodes();
		if(nodes.length > 0){
			window.location.href="/menu/menuform/"+nodes[0].id+"/"+nodes[0].parentid;
		} else {
			$.prompt.alert("请选择要修改的菜单!", null);
		}
	};
	
	//同步到支付宝
	var syncToAlipay = function(){
		$.prompt.delPromptBox("确定要同步到支付宝吗？", "/menu/SyncToAlipay", null);
	};
	
	//同步到微信
	var syncToWebChat = function(){
		$.prompt.delPromptBox("确定要同步到微信吗？", "/menu/syncToWeChat", null);
	};
	
	var setting = {
		async : {
			enable:true,
			dataType:"json",
			autoParam: ["id"],
			url:"/menu/tree"
		},
		data : {
			simpleData:{
				enable:true,
				idKey:"id",
				pIdKey:"parentid",
				rootPId:"-1"
			},
			key : {
				name:"title"
			}
		},
		view : {
			selectedMulti:false,
			showLine:true,
			showTitle:true
		},
		treeId:"tree",
		callback : {
			onClick:function(event, treeId, treeNode){
				var id = treeNode.id;
				$.http.submitForm({
					url:"/menu/get/"+id,
					success:function(r){
						$.logs.info(r);
						var title = r.title;
						var keycode = r.keycode;
						var seq = r.seq;
						var operation = r.operation;
						if(operation == 1) {//1.调用服务  2.发送消息 3.跳转连接 4.无动作
							$("input[name=operation]").val("调用服务");
						} else if(operation == 2) {
							$("input[name=operation]").val("发送消息");
						} else if(operation == 3) {
							$("input[name=operation]").val("跳转连接");
						} else if(operation == 4) {
							$("input[name=operation]").val("无动作");
						}
						
						var type = r.type;
						if(type == 1){//1.文本消息 2.单图文消息 3. 无类型，父节点的话可以是无类型的
							$("input[name=type]").val("文本消息");
						} else if(type == 2){
							$("input[name=type]").val("图文消息");
						} else if(type == 3){
							$("input[name=type]").val("无类型");
						}
						
						$("input[name=keycode]").val(keycode);
						$("input[name=title]").val(title);
						$("input[name=seq]").val(seq);
						
						var createDate = r.createDate;
						var updateDate = r.updateDate;
						var serverurl = r.serverurl; 
						var linkaddress = r.linkaddress;
						
						$("input[name=linkaddress]").val(linkaddress);
						$("input[name=serverurl]").val(serverurl);
						$("input[name=createDate]").val(createDate);
						$("input[name=updateDate]").val(updateDate);
						
					}
				});
			}
		}
	};
		
	$(function(){
		//初始化菜单树
		$.fn.zTree.init($("#tree"), setting);
		
	});
		
	//删除菜单
	function delMenu(){
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var nodes = treeObj.getSelectedNodes();
		var id;
		if(nodes.length > 0){
			var isParent = nodes[0].isParent;
			if(isParent){
				$.prompt.alert("请选择叶子节点，只可以删除叶子节点!");
				return;
			}
			id = nodes[0].id;
			$.prompt.delPromptBox("确定要删除吗？", "/menu/delmenu/"+id, "/menu/menuList");
		} else {
			$.prompt.alert("请选择要删除的菜单!");
		}
		
	}
	
	/*]]>*/
	</script>
	
</body>

</html>